<template>
    <div>
        <el-divider content-position="left">建单操作</el-divider> 
        <el-form :inline="true" :model="formData">
            <el-form-item label="选择客户：">
                <el-select style="width: 200px" v-model="formData.name" placeholder="请选择">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-button style="margin-left: 10px;" @click="addUser" type="primary" icon="plus">新建</el-button>
            </el-form-item>
             <el-form-item label="品类：">
                <el-select style="width: 200px" v-model="formData.name" placeholder="请选择">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="套数：">
                <el-input v-model="formData.name" placeholder="请输入" />
            </el-form-item>
        </el-form>
        <el-tabs type="border-card">
            <el-tab-pane label="测试板">
                <div style="display: flex;">
                    <el-form style="width: 40%; margin-right: 20px;" :model="formData">
                        <el-form-item label="PCB类型:">
                            <el-select v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="DUT同测数:">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label-position="top" label="测试机台类型及项目使用的机台配置信息:">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label-position="top" label="SI/PI具体要求:">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label-position="top" label="原理图方案说明:">
                            <el-upload action="#" ref="upload" list-type="picture" :file-list="formData.fileList" :on-exceed="handleExceed" :auto-upload="false" class="upload-demo" :on-remove="handleRemove" :on-change="handleSuccess" :limit="1">
                                <el-button type="primary">点击上传</el-button>
                                <template #tip>
                                <div class="el-upload__tip">只可上传jpg/png/gif 且大小不可超过4M</div>
                                </template>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label-position="top" label="布局及布线规则:">
                            <el-upload action="#" ref="upload" list-type="picture" :file-list="formData.fileList" :on-exceed="handleExceed" :auto-upload="false" class="upload-demo" :on-remove="handleRemove" :on-change="handleSuccess" :limit="1">
                                <el-button type="primary">点击上传</el-button>
                                <template #tip>
                                <div class="el-upload__tip">只可上传jpg/png/gif 且大小不可超过4M</div>
                                </template>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label-position="top" label="DUP POD以及Pin List\Pin Map:">
                            <el-upload action="#" ref="upload" list-type="picture" :file-list="formData.fileList" :on-exceed="handleExceed" :auto-upload="false" class="upload-demo" :on-remove="handleRemove" :on-change="handleSuccess" :limit="1">
                                <el-button type="primary">点击上传</el-button>
                                <template #tip>
                                <div class="el-upload__tip">只可上传jpg/png/gif 且大小不可超过4M</div>
                                </template>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label-position="top" label="RFQ:">
                            <el-upload action="#" ref="upload" list-type="picture" :file-list="formData.fileList" :on-exceed="handleExceed" :auto-upload="false" class="upload-demo" :on-remove="handleRemove" :on-change="handleSuccess" :limit="1">
                                <el-button type="primary">点击上传</el-button>
                                <template #tip>
                                <div class="el-upload__tip">只可上传jpg/png/gif 且大小不可超过4M</div>
                                </template>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label-position="top" label="客户端技术沟通窗口:">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="其他要求:">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-form>
                    <vue-table :tableData="tableData" :tableHeade="tableHeade"></vue-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="其他">开发中...</el-tab-pane>
        </el-tabs>
        <div style="width: 100%; text-align: center; margin-top: 10px;">
            <el-button type="primary" @click="save">下一步</el-button>
        </div>
        <el-dialog v-model="dialogVisible" title="新建客户" width="500" :close="handleClose">
            <el-form v-model="formData">
                <el-form-item label="客户ID：">
                    <el-input v-model="formData.name" />
                </el-form-item>
                <el-form-item label="是否海思：">
                    <el-switch v-model="formData.value" active-text="是" inactive-text="否" />
                </el-form-item>
                <el-form-item label="客户名称：">
                    <el-input v-model="formData.name" />
                </el-form-item>
                <el-form-item label="联系人：">
                    <el-input v-model="formData.name" />
                </el-form-item>
                <el-form-item label="电话：">
                    <el-input v-model="formData.name" />
                </el-form-item>
                <el-form-item label="手机：">
                    <el-input v-model="formData.name" />
                </el-form-item>
                <el-form-item label="Email：">
                    <el-input v-model="formData.name" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import useApplicationCenterStore from '@/store/modules/applicationCenter'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { genFileId, ElMessage } from 'element-plus'

let applicationCenter = useApplicationCenterStore()

let dialogVisible = ref<boolean>(false)
let formData = reactive({
    name: '',
    region: '',
    value: false,
    fileList:[]
})
const tableHeade = reactive([
  { prop: 'tmName', label: 'ID' },
  { prop: 'userNumber', label: 'QuotationID', width: '110' },
  { prop: 'userNumber', label: 'CustomerID', width: '110' },
  { prop: 'userNumber', label: 'QuotationType', width: '130' },
  { prop: 'userNumber', label: 'QuotationCount', width: '140' },
  { prop: 'userNumber', label: 'PCBType', width: '110' },
  { prop: 'userNumber', label: 'DUTTCCount', width: '120' },
  { prop: 'userNumber', label: 'TesterConfigInfo', width: '140' },
  { prop: 'userNumber', label: 'DUTPinMap', width: '110' },
  { prop: 'userNumber', label: 'planDesc', width: '110' },
  { prop: 'userNumber', label: 'LayoutRole', width: '110' },
  { prop: 'userNumber', label: 'SIPIRequest', width: '110' },
  { prop: 'userNumber', label: 'CustomerCommuncation', width: '200' },
  { prop: 'userNumber', label: 'OtherRequest', width: '130'},
  { prop: 'userNumber', label: 'Creater' },
  { prop: 'userNumber', label: 'CreateDate', width: '110' },
  { prop: 'userNumber', label: 'Updater', width: '110' },
  { prop: 'userNumber', label: 'UpdateTime', width: '110' },
  { prop: 'userNumber', label: 'Attach', width: '110' },
  { prop: 'userNumber', label: 'QuotStatus', width: '110' },
])
let tableData = reactive([{}])
let options1 = [
    { value: '选项1', label: '黄金糕' },
    { value: '选项2', label: '双皮奶' },
    { value: '选项3', label: '蚵仔煎' },
    { value: '选项4', label: '龙须糖' },
    { value: '选项5', label: '北京烤鸭' }
];
const addUser = () => {
    dialogVisible.value = true
}
const handleClose = () => {
    dialogVisible.value = false
}
const save = () => {
    applicationCenter.active = 1
}
const upload = ref<UploadInstance>()
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
const handleSuccess = (e: any) => {
  formData.fileList[0] = e
}
const handleRemove = (e: any) => {
  formData.fileList = []
}
</script>
<style scoped lang="scss">
.itemWidth {
    width: 155px;
}
.flex {
    display: flex;
    justify-content: space-between;
}
</style>
